Flutter এর মধ্যে Hero Animation এবং Staggered Animations

Flutter এ Hero Animation এবং Staggered Animations ব্যবহার করে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ UI তৈরি করা যায়। এগুলো অ্যাপের বিভিন্ন অংশের মধ্যে সুসংগতভাবে অ্যানিমেশন তৈরি করতে সাহায্য করে। নিচে এই অ্যানিমেশনগুলো কীভাবে কাজ করে এবং সেগুলো কনফিগার করার ধাপ এবং উদাহরণ নিয়ে আলোচনা করা হলো।

১. Hero Animation:

Hero Animation কী?

• Hero Animation একটি Flutter এর প্রি-বিল্ট অ্যানিমেশন যা দুটি স্ক্রিনের মধ্যে একটি Widget কে অ্যানিমেট করে। উদাহরণস্বরূপ, একটি ইমেজ বা বাটন একটি স্ক্রিন থেকে আরেকটি স্ক্রিনে সুসংগতভাবে ট্রানজিশন করে গেলে, Hero Animation ব্যবহার করা যায়।
• এটি সাধারণত স্ক্রিন পরিবর্তনের সময় সুনির্দিষ্ট Widget এর উপর ফোকাস রাখে এবং অ্যানিমেট করে।

Hero Animation সেটআপ করার ধাপ:

1. Hero Widget: আপনি যে Widget কে অ্যানিমেট করতে চান সেটিকে Hero Widget দিয়ে Wrap করুন।
2. tag প্রপার্টি ব্যবহার করে একটি ইউনিক নাম দিন, যাতে Flutter একই Widget কে দুটি স্ক্রিনের মধ্যে সংযুক্ত করতে পারে।

Hero Animation এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hero Animation Example',
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Hero(
            tag: 'hero-image',
            child: Image.network(
              'https://via.placeholder.com/150',
              width: 150.0,
              height: 150.0,
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-image',
          child: Image.network(
            'https://via.placeholder.com/300',
            width: 300.0,
            height: 300.0,
          ),
        ),
      ),
    );
  }
}

উদাহরণের ব্যাখ্যা:

• FirstScreen এ একটি ইমেজ আছে যা Hero Widget দিয়ে Wrap করা হয়েছে এবং একটি ইউনিক tag দেওয়া হয়েছে: 'hero-image'।
• যখন এই ইমেজে ট্যাপ করা হয়, তখন SecondScreen এ নেভিগেট করা হয় এবং দ্বিতীয় স্ক্রিনেও একই tag দিয়ে একই ইমেজ রাখা হয়। ফলে Flutter দুই স্ক্রিনের ইমেজগুলোর মধ্যে অ্যানিমেশন করে।
• Flutter স্বয়ংক্রিয়ভাবে প্রথম স্ক্রিনের ইমেজ থেকে দ্বিতীয় স্ক্রিনের ইমেজে একটি মসৃণ ট্রানজিশন তৈরি করে।

২. Staggered Animations:

Staggered Animation কী?

• Staggered Animation হলো এমন একটি অ্যানিমেশন যেখানে একাধিক অ্যানিমেশন সিকোয়েন্স বা ধাপে ধাপে শুরু হয়, যাতে অ্যানিমেশনগুলি ক্রমানুসারে বা ধারাবাহিকভাবে সম্পন্ন হয়।
• উদাহরণস্বরূপ, আপনি যদি একটি UI এ বিভিন্ন উপাদানগুলোর জন্য একটির পর একটি অ্যানিমেশন তৈরি করতে চান, তাহলে Staggered Animation ব্যবহার করতে পারেন।

Staggered Animation সেটআপ করার ধাপ:

1. AnimationController এবং Tween ব্যবহার করে একাধিক অ্যানিমেশন সেটআপ করুন।
2. Animation এর ভ্যালুগুলোকে বিভিন্ন ধাপে ভাগ করুন এবং তাদের মধ্যে ডিউরেশন সেট করুন।
3. AnimatedBuilder বা CustomPainter ব্যবহার করে অ্যানিমেশন গুলোকে UI তে রেন্ডার করুন।

Staggered Animation এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Staggered Animation Example',
      home: StaggeredAnimationScreen(),
    );
  }
}

class StaggeredAnimationScreen extends StatefulWidget {
  @override
  _StaggeredAnimationScreenState createState() => _StaggeredAnimationScreenState();
}

class _StaggeredAnimationScreenState extends State<StaggeredAnimationScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _widthAnimation;
  late Animation<double> _heightAnimation;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    );

    _widthAnimation = Tween<double>(begin: 50.0, end: 200.0).animate(
      CurvedAnimation(parent: _controller, curve: Interval(0.0, 0.5, curve: Curves.ease)),
    );

    _heightAnimation = Tween<double>(begin: 50.0, end: 200.0).animate(
      CurvedAnimation(parent: _controller, curve: Interval(0.5, 1.0, curve: Curves.ease)),
    );

    _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(
      CurvedAnimation(parent: _controller, curve: Interval(0.0, 1.0, curve: Curves.ease)),
    );

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Staggered Animation')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Container(
              width: _widthAnimation.value,
              height: _heightAnimation.value,
              color: _colorAnimation.value,
            );
          },
        ),
      ),
    );
  }
}

উদাহরণের ব্যাখ্যা:

• AnimationController: _controller তৈরি করা হয়েছে, যা ৩ সেকেন্ডের ডিউরেশন নিয়ে কনফিগার করা হয়েছে।
• Width Animation: _widthAnimation ০ থেকে ৫০% সময়ের মধ্যে _controller এর সাথে সংযুক্ত করে একটি ওয়াইড অ্যানিমেশন তৈরি করা হয়েছে।
• Height Animation: _heightAnimation ৫০% থেকে ১০০% সময়ের মধ্যে _controller এর সাথে সংযুক্ত করে একটি হাইট অ্যানিমেশন তৈরি করা হয়েছে।
• Color Animation: _colorAnimation পুরো ডিউরেশন জুড়ে _controller এর সাথে সংযুক্ত করে কালার অ্যানিমেশন তৈরি করা হয়েছে।
• AnimatedBuilder: AnimatedBuilder ব্যবহার করে অ্যানিমেশনগুলোকে একটি Container এর মধ্যে রেন্ডার করা হয়েছে।

Hero এবং Staggered Animation এর সুবিধা:

Hero Animation:

• সহজে দুই স্ক্রিনের মধ্যে অ্যানিমেটেড ট্রানজিশন তৈরি করতে।
• UI এর নির্দিষ্ট অংশের উপর ফোকাস ধরে রাখতে সাহায্য করে।

Staggered Animation:

• একাধিক অ্যানিমেশনকে ধারাবাহিকভাবে বা সিকোয়েন্সে সাজিয়ে আরো জটিল এবং সুসংগত অ্যানিমেশন তৈরি করতে।
• UI কে আরও ইন্টারেক্টিভ এবং প্রানবন্ত করে।

সংক্ষেপে:

• Hero Animation: দুটি স্ক্রিনের মধ্যে একটি নির্দিষ্ট Widget এর অ্যানিমেটেড ট্রানজিশন তৈরি করে।
• Staggered Animation: একাধিক অ্যানিমেশনকে সিকোয়েন্সে সাজিয়ে UI তে প্রভাব ফেলে।

Flutter এ Hero Animation এবং Staggered Animations ব্যবহার করে আপনার অ্যাপের UI কে আরও ইন্টারেক্টিভ এবং আকর্ষণীয় করা যায়।